<template>
  <div id="app">
    <el-container>
      <div class="user-select">
        <UserList @select-user="handleSelectUser" />
      </div>
      <el-main class="el-container">
        <router-view :key="route.fullPath" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import UserList from '../../components/csr/UserList.vue';
import {useRouter } from 'vue-router';
import userInf from '../../stores/user'
import messageStore from '../../stores/csr/MessageStore';
import { useRoute } from 'vue-router';

const emit = defineEmits(['select-user']);
const router = useRouter();
const route = useRoute()

const mesStore=messageStore()
const userIf=userInf()

if(mesStore.park){
  mesStore.setPark(false)
  router.go(0)
}

mesStore.buildWebsocket(userIf.user.id)

function handleSelectUser(userId: string) {
  try {
    router.push({ name: 'Chat', params: { userId } });

  } catch (error) {
    console.error('Mounted hook error in UserList:', error);
    // 额外的错误处理逻辑
  }
}
</script>

<style lang="scss" scoped>
#app {
  height: auto;
  display: flex;
}

.el-container {
  width: 100px;
  height: 785px;
}

.user-select {
  width: 100px;
  height: 100%;
}
</style>
